<template>
  <div class="app">
    <div class="Bbox">
      <el-button type="danger" style="margin-top: 20px; margin-left: 20px;" @click="addVisible = true">添加工作模式</el-button>

      <el-table
        :data="tableData"
        style="width: 100%;margin-top: 20px;margin-left: 20px;"
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
        />
        <el-table-column
          prop="name"
          label="工作模式"
        />
        <el-table-column

          prop="workPatternTypeDesc"
          label="类型"
        />
        <el-table-column
          prop="workDate"
          label="工作日期"
          width="600px"
        />
        <el-table-column
          prop="workEndMinute1"
          label="工作时间"
        >
          <template v-slot="{ row }">
            <span>{{ ((row.workEndMinute1-row.workStartMinute1)/60).toFixed(2) }}小时</span>
          </template>

        </el-table-column>

        <el-table-column

          label="操作"
          width="180"
        >
          <template v-slot="{row}">
            <el-button type="text" size="small" @click="handleClick(row.id)">编辑</el-button>
            <el-button type="text" size="small" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          :current-page="pageParams.page"
          :page-size="pageParams.pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>

      <!-- 添加-->
      <el-dialog
        :title="title"
        :visible.sync="addVisible"
        width="40%"
        :before-close="addhandleClose"
      >

        <el-tabs v-model="addActiveName" style="margin-left: 10px;margin-right: 10px;" @tab-click="addHandleClick">
          <el-tab-pane label="礼拜制" name="first">
            <el-form ref="CheapForm" :rules="cheapRules" :model="cheapForm" label-width="150px">

              <el-form-item label="工作模式名称:" prop="name">
                <el-input v-model="cheapForm.name" style="width: 400px;" placeholder="请输入工作模式名称" />
              </el-form-item>

              <el-form-item label="连续工作天数:" prop="workDayNum">
                <el-checkbox-group v-model="workDayList" @change="group">
                  <el-checkbox v-model="cheapForm.monday" label="周一" name="type" />
                  <el-checkbox v-model="cheapForm.tuesday" label="周二" name="type" />
                  <el-checkbox v-model="cheapForm.wednesday" label="周三" name="type" />
                  <el-checkbox v-model="cheapForm.thursday" label="周四" name="type" />
                  <el-checkbox v-model="cheapForm.friday" label="周五" name="type" />
                  <el-checkbox v-model="cheapForm.saturday" label="周六" name="type" />
                  <el-checkbox v-model="cheapForm.sunday" label="周日" name="type" />
                </el-checkbox-group>
              </el-form-item>

              <span style="color: #bac0cd; margin-left: 150px; margin-bottom: 30px;">选择时间为工作时间未选中为休息时间</span>

              <el-form-item prop="workEndMinute1" label="工作时间:" style="margin-top: 20px;">
                <el-time-picker
                  v-model="pickerList"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                  @change="pickerChange"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="addConfirm">确定</el-button>
                <el-button>取消</el-button>
              </el-form-item>

            </el-form>
          </el-tab-pane>
          <!-- =============== -->
          <el-tab-pane v-if="title==='新增工作模式'" label="连续制" name="second">
            <el-form ref="form" label-width="100px">
              <el-form-item label="工作模式名称:">
                <el-input style="width: 500px;" />
              </el-form-item>

              <el-form-item label="连续工作天数">
                <span>上
                  <el-input style="width: 200px;">
                    <template slot="append">天</template>
                  </el-input>
                </span>

                <span>休
                  <el-input style="width: 200px;">
                    <template slot="append">天</template>
                  </el-input>
                </span>
              </el-form-item>

              <el-form-item label="工作时间:">
                <el-time-picker
                  v-model="value1"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                />
              </el-form-item>

              <el-form-item class="primary">
                <el-button type="primary">确定</el-button>
                <el-button>取消</el-button>
              </el-form-item>

            </el-form>
          </el-tab-pane>
        </el-tabs>

      </el-dialog>
    </div>
  </div>
</template>
<script>
import { addPatterns, delPatterns, getPatternsDetails, getPatternsPage } from '@/api/workArrange'
export default {
  data() {
    return {
      title: '新增工作模式',
      pickerList: [new Date(2016, 9, 10, 9, 0), new Date(2016, 9, 10, 18, 0)], // 添加-礼拜-表单-时间数组
      workDayList: [], // 添加-礼拜-表单-连续工作天数
      rules: [],
      cheapForm: {
        friday: '', // 星期五 -，0:不填充，1:工作，2:休息
        monday: '', // 星期一
        name: '', // 名称
        operator: '', // 操作人
        restDayNum: '', // 休息天数
        saturday: '', // 星期六
        sunday: '', // 星期日
        thursday: '', // 星期四
        tuesday: '', // 星期二
        userType: '', // 用户类型,1:员工，2:快递员，3:司机
        wednesday: '', // 星期三
        workDayNum: '', // 连续工作天数
        workEndMinute1: '', // 工作结束时间1，分钟数
        workPatternType: '', // 工作模式：1：礼拜制，2：连续制
        workStartMinute1: ''// 工作开始时间1，分钟数
      }, // 添加-礼拜-表单
      cheapRules: {
        name: [{ required: true, message: '工作模式不能为空', trigger: 'blur' }],
        workDayNum: [{ required: true, trigger: 'blur' }],
        workEndMinute1: [{ required: true, trigger: 'Change' }]
      },
      value1: [new Date(2016, 9, 10, 9, 0), new Date(2016, 9, 10, 18, 0)],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      addForm: {}, // 添加-表单
      addVisible: false, // 添加-开关
      addActiveName: 'first', // 添加-tab-切换
      // 渲染参数
      pageParams: {
        pageSize: 10,
        page: 1
      },
      total: 0,
      tableData: [],
      dialogVisible: false // 控制显示

    }
  },
  created() {
    this.getList()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    async getList() {
      const res = await getPatternsPage(this.pageParams)
      // console.log(res)
      this.tableData = res.data.items
      this.total = Number(res.data.counts)
      console.log(this.tableData)
    },
    handleSizeChange(newPageSize) {
      this.pageParams.pageSize = newPageSize
      console.log(this.pageParams)
      this.getList()
    },
    // 页码改变
    handleCurrentChange(newPage) {
      this.pageParams.page = newPage
      this.getList()
    },
    // 编辑
    async handleClick(id) {
      this.title = '编辑工作模式'
      console.log(id)
      this.addVisible = true
      const res = await getPatternsDetails(id)
      console.log(res)
    },
    // 关闭
    handleClose() {
      this.addVisible = false
    },
    // 添加-tab栏
    addHandleClick(tab, event) {
      console.log(tab, event)
    },
    // 新增工作模式-确定
    async addWork() {
      await addPatterns(this.addForm)
    },
    // 添加-关闭
    addhandleClose() {
      this.addVisible = false
    },
    // 复选框-发生改变
    group(newWorkDayList) {
      this.cheapForm.monday = newWorkDayList.includes('周一') ? '1' : '0'
      this.cheapForm.tuesday = newWorkDayList.includes('周二') ? '1' : '0'
      this.cheapForm.wednesday = newWorkDayList.includes('周三') ? '1' : '0'
      this.cheapForm.thursday = newWorkDayList.includes('周四') ? '1' : '0'
      this.cheapForm.friday = newWorkDayList.includes('周五') ? '1' : '0'
      this.cheapForm.saturday = newWorkDayList.includes('周六') ? '1' : '0'
      this.cheapForm.sunday = newWorkDayList.includes('周日') ? '1' : '0'
    },
    // 删除
    async del(id) {
      await this.$confirm('确定删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      await delPatterns(id)
      this.$message.success('删除成功')
    },
    // 添加-礼拜-表单-时间数组
    pickerChange(valueList) {
      // console.log(valueList)
      // 开始时间
      const dateObject1 = new Date(valueList[0])
      const totalMinutes1 = dateObject1.getUTCHours() * 60 + dateObject1.getUTCMinutes()
      this.cheapForm.workStartMinute1 = totalMinutes1
      // 结束时间
      const dateObject2 = new Date(valueList[1])
      const totalMinutes2 = dateObject2.getUTCHours() * 60 + dateObject2.getUTCMinutes()
      this.cheapForm.workEndMinute1 = totalMinutes2

      // 连续工作天数
      this.cheapForm.orkDayNum = valueList.length
      // 休息天数
      this.cheapForm.restDayNum = 7 - valueList.length
    },
    // 添加-礼拜-保存
    async addConfirm() {
      this.cheapForm.workPatternType = '1'
      await addPatterns(this.cheapForm)
    }
  }
}

</script>
<style>
.app{
  margin-left: 20px;
  margin-right: 20px;
}
.Bbox{
  margin: 10px;
  width: 100%;
  height: 900px;
  background-color: #fff;
}
.block{
  padding-top: 25px;
  font-size: 24px;
  display:flex;
  justify-content: center;
}
.primary{
  display: flex;
  justify-content: center;
  align-items: center;

}
.el-dialog__body{
padding: 10px 30px;
}

</style>
